<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->


<style>
body {
	margin-top: 20px;
	margin: 0 auto;
	width: 100%;
}

.carousel-inner .item img {
	width: 100%;
	height: 300px;
}

.tp-list{
	width:200px;
}
</style>
</head>

<body>


	<!-- 引入header.jsp -->
	<div id="header"></div>
	
	
	<div class="row" style="width: 1210px; margin: 0 auto;">
		<div class="col-md-12">
			<ol class="breadcrumb">
				<li><a href="#">当前位置:首页</a></li>
			</ol>
		</div>
		
		<ul id="ulclass"></ul>
		<div class="clear"></div>
		<div id="test1"></div>
	</div>

		
	

	<!--商品浏览记录-->
	<div
		style="width: 1210px; margin: 0 auto; padding: 0 9px; border: 1px solid #ddd; border-top: 2px solid #999; height: 246px;">

		<h2>商品浏览历史</h2>
		<div id="liulan"></div>
		
	</div>


	<!-- 引入footer.jsp -->
	<div id="footer"></div>

</body>

</html>

<script src="https://www.layuicdn.com/layui/layui.all.js"></script>

<script type="text/javascript">

//声明一个js参数，用来取得地址栏
function getUrlSearch(name) {
  // 未传参，返回空
  if (!name) return null;
  // 查询参数：先通过search取值，如果取不到就通过hash来取
  var after = window.location.search;
  after = after.substr(1) || window.location.hash.split('?')[1];
  // 地址栏URL没有查询参数，返回空
  if (!after) return null;
  // 如果查询参数中没有"name"，返回空
  if (after.indexOf(name) === -1) return null;
 
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
  // 当地址栏参数存在中文时，需要解码，不然会乱码
  var r = decodeURI(after).match(reg);
  // 如果url中"name"没有值，返回空
  if (!r) return null;
  return r[2];
}

</script>


<script type="text/javascript">
//加载头部
$.post('header.jsp',{},function(data){
	$("#header").html(data);
},'text');


//加载尾部
$.post('footer.jsp',{},function(data){
	$("#footer").html(data);
},'text');

</script>





<script>
layui.use(['form','jquery','laypage'], function(){
	var $=layui.jquery;
	var laypage=layui.laypage;//引入分页
	//调用方法   	获得地址栏

	var gtype=getUrlSearch('gtype');
	var page=getUrlSearch('page');

	//发送ajax请求
	var obj={
			"gtype":gtype,
			"page":page
	};
	$.post('/heima/findGoodsTypeList',obj,function(data){
		layuipage(laypage,data.count);//调用分页条方法，传入
		insertHtmlUlLi(data);//拼接dom
		
	},'json');
	
	//得到uid
	var uid=getUrlSearch('uid');
	obj={
			"uid":uid,
			"page":page
	};
	
	//拼接浏览历史的数据
	$.post('/heima/getUserFoot',obj,function(data){
		console.log(data);
		//循环得到数据
		var html="";
		for(var i=0;i<data.list.length;i++){
			var str = '<li style="float:left;">' ;
				//str += '<div>'+data.list[i].gid+'</div>';
				str += '<div><img width=100 src='+data.list[i].gphoto+' /></div>';
				str += '<div><a href="product_info.jsp?gid='+data.list[i].gid+'">'+data.list[i].gname+'</a></div>';
				str +='</li>';
			html+=str ;
		}
		$("#liulan").html(html);
	},'json');
	
	
});

function layuipage(laypage,num){
	//执行一个laypage实例
	laypage.render({
		elem:'test1'//注意，这里的test1是id
		,count:num//数据总数，从服务端得到
		,theme:'#ff0066'
		,groups:3
		,jump:function(obj,first){
			if(!first){//首次不执行
				//layer.msg('第'+obj.curr+'页');
				//1.得到点击的分页的数字
				
				var page=obj.curr;
				//2.清空ul li
				
				$("#ulclass").empty();
				//3.发送ajax请求   加载数据
				var obj={
					"page":page
				};
				$.post('/heima/findGoodsTypeList',obj,function(data){
					//将得到的数据进行组装
					insertHtmlUlLi(data);//拼接dom
					
				},'json');
			}
		}
	});
}



function insertHtmlUlLi(data){
	var html="";
	for(var i=0;i<data.list.length;i++){
		var str="<li style='display:inline-block;list-style-type:none;'>";
			str+="<div class='remen mingxing fl mb20' id='mingxing2'>";
			str+="<div class'sub_mingxing'>";
			str+="<a href='product_info.jsp?gid="+data.list[i].gid+"'><img class='tp-list' src='"+data.list[i].gphoto+"' alt=''></a>";
			str+="</div>";
			str+="<div class='pinpai'>";
			str+="<a href='product_info.jsp?gid="+data.list[i].gid+"'>"+data.list[i].gname+"</a>";
			str+="</div>";
			str+="<div class='jiage'>"+"￥"+data.list[i].gprice+"</div>";
			str+="</div></li>";
			
			html+=str;
	}
	
	//追加到页面
	$("#ulclass").html(html);
}
</script>